import React from 'react'
import Admin from "../../../layout/Admin";
import {Button, PageHeader, Popconfirm, Table, Form,} from "antd";
import PointModel from "../../../model/point";
import EditableTable from "../../../component/EditableTable/EditableTable";
import info from "../../../service/info";
import ModalComponent from "../../../component/Modal/ModalComponent";

class Point extends React.Component {

    constructor(props) {
        super(props)
        this.pointModel = new PointModel()
        this.state = {
            pointList: [],
            modal: false,
            // editingKey: '',
        }
    }

    componentDidMount() {
        this.get()
    }

    get = () => {
        let p = this.pointModel
        p.get()
            .then(res => {
                const pointList = res.data.ok
                pointList.forEach((p, i) => p.key = (i + 1).toString())
                this.setState({
                    pointList
                })
            })
    }

    save = ({old, change}) => {
        const style = old.Style
        const exp = Number(change.Exp)
        const params = {style, exp,}
        const m = this.pointModel
        return m.changeExp(params)
            .then(resp => {
                if (resp.data.ok === 1) {
                    info.success('修改成功')
                }
            })
            .then(() => this.get())
    }


    render() {

        const data = this.state.pointList

        const header = <div style={{background: '#fff'}}>
            <PageHeader title='积分管理'/>
        </div>

        const typeMapper = {
            1: '观看直播',
            2: '注册',
            3: '每日签到',
            4: '每日分享',
            5: '聊天发言',
            6: '实名认证',
            7: '金币充值',
            8: '会员充值',
        }

        const columns = [
            {
                title: '序号',
                dataIndex: 'Style',
                render: (Style) => <span>{Style}</span>
            },
            {
                title: '类型',
                dataIndex: 'type',
                render: (text, record) => <span>{typeMapper[record.Style]}</span>,
            },
            {
                title: '获取经验设置',
                dataIndex: 'Exp',
                render: (text, record) => <span>{text}</span>,
                editable: true,
            },
            {
                title: '每日次数上限',
                dataIndex: 'Countmax',
                render: (text, record) => <span>{text}</span>,
            },
        ]

        const table = <EditableTable
            save={this.save}
            dataSource={data}
            columns={columns}
        />

        const modal = <ModalComponent
            onClose={() => this.setState({modal: false,})}
        >
            <div>
                <Button onClick={e => this.setState({modal: false})}>close</Button>
            </div>
        </ModalComponent>

        return <Admin>
            {this.state.modal ? modal : null}
            {header}
            <Button onClick={e => this.setState({modal: true})}>open</Button>
            {table}
        </Admin>
    }
}

export default Point
